/*
 * @Author: hua
 * @Date: 2020-03-07 14:45:54
 * @description:
 * @LastEditors: hua
 * @LastEditTime: 2020-04-12 09:08:59
 */
import * as React from 'react';
import {Component} from 'react';
import {Provider} from 'react-redux';
import {Button, Platform} from 'react-native';
import SplashScreen from 'react-native-splash-screen';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import Icon from 'react-native-vector-icons/FontAwesome';
import Toast from 'react-native-root-toast';
import SettingScreen from './pages/SettingScreen';
import HomeScreen from './pages/HomeScreen';
import store from './store';
import routes from './routes';
import I18n from './i18n';

const TITLE_OFFSET = Platform.OS === 'ios' ? 70 : 56;
const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();
function bottomTab() {
  return (
    <Tab.Navigator
      screenOptions={({route}) => ({
        tabBarIcon: ({focused, color, size}) => {
          let iconName;
          let iconColor;
          if (route.name === 'Home') {
            iconColor = focused ? 'blue' : 'gray';
            iconName = 'home';
          } else if (route.name === 'Setting') {
            iconColor = focused ? 'blue' : 'gray';
            iconName = 'cog';
          } else if (route.name === 'List') {
            iconColor = focused ? 'blue' : 'gray';
            iconName = 'list';
          } else if (route.name === 'Details') {
            iconColor = focused ? 'blue' : 'gray';
            iconName = 'user';
          }
          // You can return any component that you like here!
          return <Icon name={iconName} size={26} color={iconColor} />;
        },
      })}
      tabBarOptions={{
        activeTintColor: 'blue',
        inactiveTintColor: 'gray',
        labelStyle: {
          fontSize: 14,
        },
      }}>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="List" component={SettingScreen} />
      <Tab.Screen name="Details" component={SettingScreen} />
      <Tab.Screen name="Setting" component={SettingScreen} />
    </Tab.Navigator>
  );
}

export default class App extends Component {
  constructor(props) {
    super(props);
  }
  state = {key: ''};

  componentDidMount() {
    SplashScreen.hide();
  }
  refreshLanguage() {
    let locale = I18n.locale;
    /* Toast.show(I18n.t('button'), {
      duration: Toast.durations.LONG,
      position: Toast.positions.CENTER,
    }); */
    switch (locale) {
      case 'zh':
        I18n.locale = 'en';
        break;
      case 'en':
        I18n.locale = 'zh';
        break;
      default:
        I18n.locale = 'zh';
        break;
    }
    console.log(I18n.t('button'));
    this.setState({
      key: Math.random(),
    });
  }
  render() {
    return (
      <Provider store={store}>
        <NavigationContainer key={this.state.key}>
          <Stack.Navigator>
            {routes.map(item => {
              return (
                <Stack.Screen
                  key={item.name}
                  name={item.name}
                  options={{
                    title: item.header ? I18n.t(item.title) : '',
                    headerStyle: {height: item.header ? 50 : 0},
                    headerTitleStyle: {
                      alignSelf: 'center',
                      textAlign: 'center',
                      flex: 1,
                      fontSize: 18,
                      color: 'gray',
                    },
                    headerTitleContainerStyle: {
                      left: TITLE_OFFSET,
                      right: TITLE_OFFSET,
                    },
                    headerRight: () => (
                      <Button
                        onPress={() => this.refreshLanguage()}
                        title={I18n.t('switchLan')}
                        color="gray"
                      />
                    ),
                  }}
                  component={item.component}
                />
              );
            })}
            {/* <Stack.Screen
              options={{title: '',headerStyle: {height: 0}}}
              name="bottomTab"
              component={bottomTab} />
            <Stack.Screen name="Details" component={HomeScreen}
              options={{
                title: 'My home',
                headerStyle: {
                  backgroundColor: '#f4511e',
                },
                headerTintColor: '#fff',
                headerTitleStyle: {
                  alignSelf: 'center',
                  textAlign: 'center',
                  flex: 1,
                  fontSize: 18,
                  color: '#fff',
                },
                headerTitleContainerStyle: {
                  left: TITLE_OFFSET,
                  right: TITLE_OFFSET,
                }
              }}
            /> */}
          </Stack.Navigator>
        </NavigationContainer>
      </Provider>
    );
  }
}
